
<div class="row">
	<div class="col-xs-12 col-sm-12" id="switch-chat-room-div">
	<div class="col-xs-3 col-sm-3"></div>
	 <div class="col-xs-9 col-sm-9">
	      <ul class="ace-thumbnails clearfix col-xs-8 col-sm-8">
				<li>
					<a href="javascript:void(0);"  class="cboxElement switch-chat-room" data-tab="room-one">
						<img width="200" height="200" alt="150x150" src="/images/gallery/thumb-4.jpg">
						<div class="tags">
							<span class="label-holder">
								<span class="label label-info arrowed chat-room-title">交友吧</span>
							</span>
							
							<span class="label-holder">
								<span class="label label-info arrowed">绿行</span>
							</span>
	
							<span class="label-holder">
								<span class="label label-danger" >在线<font color="red" id="room1-user-no">0</font>人</span>
							</span>
						</div>
					</a>
	
					<div class="tools tools-top">
						进入房间
					</div>
				</li>
				
				<li>
					<a href="javascript:void(0);"  class="cboxElement switch-chat-room" data-tab="room-two">
						<img width="200" height="200" alt="150x150" src="/images/gallery/thumb-4.jpg">
						<div class="tags">
							<span class="label-holder">
								<span class="label label-info arrowed chat-room-title">交友1吧</span>
							</span>
							
							<span class="label-holder">
								<span class="label label-info arrowed">绿行</span>
							</span>
	
							<span class="label-holder">
								<span class="label label-danger">在线<font color="red" id="room2-user-no">0</font>人</span>
							</span>
						</div>
					</a>
	
					<div class="tools tools-top">
						进入房间
					</div>
				</li>
				
				<li>
					<a href="javascript:void(0);"  class="cboxElement switch-chat-room" data-tab="room-three">
						<img width="200" height="200" alt="150x150" src="/images/gallery/thumb-4.jpg">
						<div class="tags">
							<span class="label-holder">
								<span class="label label-info arrowed chat-room-title">交友2吧</span>
							</span>
							
							<span class="label-holder">
								<span class="label label-info arrowed">绿行</span>
							</span>
	
							<span class="label-holder">
								<span class="label label-danger">在线<font color="red" id="room3-user-no">0</font>人</span>
							</span>
						</div>
					</a>
	
					<div class="tools tools-top">
						进入房间
					</div>
				</li>
				
				<li>
					<a href="javascript:void(0);"  class="cboxElement switch-chat-room" data-tab="room-four">
						<img width="200" height="200" alt="150x150" src="/images/gallery/thumb-4.jpg">
						<div class="tags">
							<span class="label-holder">
								<span class="label label-info arrowed chat-room-title">交友3吧</span>
							</span>
							
							<span class="label-holder">
								<span class="label label-info arrowed">绿行</span>
							</span>
	
							<span class="label-holder">
								<span class="label label-danger">在线<font color="red" id="room4-user-no">0</font>人</span>
							</span>
						</div>
					</a>
	
					<div class="tools tools-top">
						进入房间
					</div>
				</li>
			</ul>
    </div>
    <!-- /content -->
		
	</div>
	<!-- 聊天main -->
	<div class="col-xs-12 col-sm-12 hide" id="chat-room-main-div">
		<!-- PAGE CONTENT BEGINS -->
				<div>
						<h4 class="smaller" title="选择房间" >
								<div class="col-sm-5 col-xs-5">
										<button class="btn btn-app btn-warning btn-xs" id="leave-chat-room">
											<i class="ace-icon fa fa-reply icon-only"></i>
										</button>
								</div>
								<span  id="chat-room-title"></span>
						</h4>
						<!-- 聊天 -->
						<div class="col-sm-10 col-xs-10">
								<div class="widget-box">
									<div class="widget-header">
										<h4 class="widget-title lighter smaller">
											<i class="ace-icon fa fa-comment blue"></i>
											聊天
										</h4>
									</div>
	
									<div class="widget-body">
										<div class="widget-main no-padding">
											<!-- #section:pages/dashboard.conversations -->
											<div class="dialogs"  id="conversation-div">
													<!-- 聊天内容列表 -->
											</div>
											<!-- /section:pages/dashboard.conversations -->
											<form>
												<div class="form-actions">
													<div class="input-group">
														<input placeholder="请说些什么..." type="text" class="form-control" name="message" id="message-input">
														<span class="input-group-btn">
															<button class="btn btn-sm btn-info no-radius" type="button" id="message-send-btn">
																<i class="ace-icon fa fa-share"></i>
																发送
															</button>
														</span>
													</div>
												</div>
											</form>
										</div><!-- /.widget-main -->
									</div><!-- /.widget-body -->
								</div><!-- /.widget-box -->
							</div>
							
					<!-- 在线用户 -->
					<div class="col-xs-2 col-sm-2" >
							<div class="widget-box">
							<div class="widget-header">
								<h4 class="widget-title lighter smaller">
									<i class="ace-icon fa  fa-users blue"></i>
									在线用户
								</h4>
							</div>
	
							<div class="widget-body">
									<div class="profile-feed row">
										<div class="col-sm-12 col-xs-12" id="online-users-div">
												<!-- 在线用户列表 -->
										</div><!-- /.col -->
									</div>	
								</div>
							</div>
				</div>
				
				
				<!--====================用户举报 =====================================-->
				<div id="report-user-modal-form" class="modal fade" tabindex="-1" >
						<div class="modal-dialog">
							<div class="modal-content" style="width: 500px;">
							
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">&times;</button>
									<h4 class="blue bigger">您确定要举报<i style="color: red;" class="title-account"></i>用户吗?</h4>
								</div>
								<!-- ============弹出层modelbody ======start==========-->
								<div class="modal-body" style="height: 150px;">
									<div>
										<label for="form-field-9">举报理由</label>

										<textarea class="form-control limited"  maxlength="1000" style="height: 96px;"></textarea>
									</div>
								</div>
								<!-- ============弹出层model foot======end==========-->
								<div class="modal-footer">
									<button class="btn btn-sm" data-dismiss="modal" id="add-report-cancel-btn">
										<i class="ace-icon fa fa-times"></i>
										取消
									</button>
							
									<button class="btn btn-sm btn-primary" id="add-report-save-btn">
										<i class="ace-icon fa fa-check"></i>
										举报
									</button>
								</div>
							</div>
						</div>
					</div>
					
					
					
					
				<!--====================用户私信====================================-->
				<div id="chat-user-modal-form" class="modal fade" tabindex="-1" >
						<div class="modal-dialog">
							<div class="modal-content" style="width: 800px;height:800px;">
							
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">&times;</button>
									<h4 class="blue bigger">公告</h4>
								</div>
								<!-- ============弹出层modelbody ======start==========-->
								<div class="modal-body" style="height: 700px;" id="view-content">
									<!-- 公告详情 -->
								</div>
								<!-- ============弹出层model foot======end==========-->
								<div class="modal-footer">
									<button class="btn btn-sm" data-dismiss="modal" id="add-public-cancel-btn">
										<i class="ace-icon fa fa-times"></i>
										取消
									</button>
							
									<button class="btn btn-sm btn-primary" id="add-public-save-btn">
										<i class="ace-icon fa fa-check"></i>
										发送
									</button>
								</div>
							</div>
						</div>
					</div>
					<div id="ring" style="widht:0px; height:0px;"></div>
		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript" src="/js/page/chatroom.js"></script>
